<template>
    <div>
        <!-- 搜索 start -->
        <page-main v-if="!patrol_status">
            <el-row class="filter-row" :gutter="20">
                <el-col :span="4">
                    <span class="filter-label">单位名称</span>
                    <el-input size="default" clearable v-model="searchForm.unitBaseName" placeholder="请输入"></el-input>
                </el-col>
                <el-col :span="5">
                    <span class="filter-label">单位编号</span>
                    <el-input size="default" clearable v-model="searchForm.unitCode" placeholder="请输入"></el-input>
                </el-col>
                <el-col :span="5">
                    <span class="filter-label">商户号</span>
                    <el-input size="default" clearable v-model="searchForm.number" placeholder="请输入"></el-input>
                </el-col>
                <!-- <el-col :span="4">
          <span class="filter-label">单位类型</span>
          <el-select v-model="searchForm.unit_type" filterable clearable>
            <el-option
              v-for="item in unitTypeList"
              :key="item"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span class="filter-label">技术服务机构</span>
          <el-select v-model="searchForm.wb_unit_id" filterable clearable>
            <el-option
              v-for="item in wbUnitTypeList"
              :key="item.id"
              :label="item.abbreviation"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span class="filter-label">负责人</span>
          <el-input
            clearable
            v-model="searchForm.contact_name"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <span class="filter-label">区域</span>
          <el-select v-model="searchForm.region_id" filterable clearable>
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <span class="filter-label">物联网</span>
          <el-select v-model="searchForm.have_install" filterable clearable>
            <el-option
              v-for="item in isHaveDeviceOption"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col> -->
                <el-col :span="4">
                    <el-button size="default" class="searchBtn" type="primary" @click="searchBtn">搜索</el-button>
                    <el-button size="default" type="warning" @click="refreshBtn">重置</el-button>
                </el-col>
            </el-row>
        </page-main>
        <!-- 搜索 end -->
        <page-main>
            <el-table v-if="data != 10" :data="tableData" v-loading="loading">
                <el-table-column label="id" width="80" prop="id"></el-table-column>
                <el-table-column label="商户号" prop="number"></el-table-column>
                <el-table-column label="单位名称" prop="name"> </el-table-column>
                <el-table-column label="监管等级" prop="watch_level"> </el-table-column>
                <el-table-column label="单位地址" prop="address"> </el-table-column>
                <el-table-column label="行政区域" prop="region_name"> </el-table-column>
                <el-table-column label="单位类型" prop="unit_type"> </el-table-column>
                <el-table-column label="负责人" prop="contact_name" width="90"> </el-table-column>
                <el-table-column label="联系电话" prop="phone" width="115"> </el-table-column>
                <!-- <el-table-column label="服务机构" prop="wb_name"> </el-table-column> -->
                <el-table-column label="创建时间" prop="add_time" sortable width="110"></el-table-column>

                <el-table-column width="200" fixed="right" label="操作" align="center">
                    <!-- <template #header>
            <el-button size="mini" type="primary" @click="addEditSocialUnit"
              >添加</el-button
            >
          </template> -->
                    <template #default="scope">
                        <div style="margin-top: 10px" v-if="scope.row.examineNum > 0">
                            <el-button size="default" type="danger" plain
                                @click="jumpEvent('unitAdministrativeSanction', scope.row)">行政处罚</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div v-else>
                <el-form :model="search1" inline>
                    <el-form-item label="任务名称">
                        <el-input v-model="search1.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="生成时间">
                        <el-date-picker v-model="search1.add_time" type="date" placeholder="请选择"
                            value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item label="是否有隐患">
                        <el-select v-model="search1.is_danger" placeholder="请选择" clearable>
                            <el-option label="否" :value="0"></el-option>
                            <el-option label="是" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否有故障">
                        <el-select v-model="search1.is_fault" placeholder="请选择" clearable>
                            <el-option label="否" :value="0"></el-option>
                            <el-option label="是" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getearlyWarningData()" size="default">搜索</el-button>
                        <el-button type="warning" @click="reset" size="default">重置</el-button>
                        <el-button type="success" @click="onDownExcel" size="default">导出</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="earlyWarningData" v-loading="loading" height="450px">
                    <el-table-column label="任务名称" prop="name" width="150"> </el-table-column>
                    <el-table-column label="巡查规则名称" prop="rule_name" width="200"> </el-table-column>
                    <el-table-column label="巡查人员" prop="realname" width="150"> </el-table-column>
                    <el-table-column label="单位名称" prop="unit_name" width="150"></el-table-column>
                    <el-table-column label="是否有隐患" prop="is_danger" width="110">
                        <template #default="scope">
                            <span>{{ scope.row.is_danger == 0 ? '无' : '有' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否有故障" prop="is_fault" width="110">
                        <template #default="scope">
                            <span>{{ scope.row.is_fault == 0 ? '无' : '有' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规则创建时间" prop="rule_add_time" width="165"> </el-table-column>
                    <el-table-column label="生成时间" prop="add_time" :formatter="formatDate" width="165">
                    </el-table-column>
                    <el-table-column label="开始时间" prop="start_time" :formatter="formatDate" width="165">
                    </el-table-column>
                    <el-table-column label="结束时间" prop="end_time" :formatter="formatDate" width="165">
                    </el-table-column>
                    <el-table-column label="完成时间" prop="last_add_time" :formatter="formatDate" width="165">
                    </el-table-column>
                    <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
                    <el-table-column width="100" label="巡查结果" prop="result">
                        <template #default="scope">
                            <span :style="scope.row.result == '不合格' ? 'color:red' : ''"> {{ scope.row.result }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="100" fixed="right" label="操作">
                        <template #default="scope">
                            <div>
                                <el-button size="default" @click="showTaskDetail(scope.row)">查看</el-button>
                                <!-- <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除？"
                @confirm="delTask(scope.row)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button size="mini" type="danger">删除</el-button>
                </template>
            </el-popconfirm> -->
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog v-model="taskDetailVisible" width="50%" destroy-on-close :close-on-click-modal="false">
                <unitTaskMangeDetail :id="taskId"></unitTaskMangeDetail>
            </el-dialog>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" v-model:currentPage="tableDataInfo.currPage"
                    :page-count="tableDataInfo.totalPage" :total="tableDataInfo.totalCount" background
                    layout="total,prev, pager, next, jumper">
                    <!-- :hide-on-single-page="true" -->
                </el-pagination>
            </div>
        </page-main>
    </div>
</template>
<script>
import unitTaskMangeDetail from '@/views/sociolUnitMange/unitTaskMangeDetail.vue'
export default {
    props: ['setUnitTime', 'setUnitWatchLevel', 'patrol_status', 'all', 'data'],
    components: {
        // addEditUnit,
        unitTaskMangeDetail
    },
    data() {
        return {
            taskDetailVisible: false,
            searchForm: {
                id: '',
                name: '',
                unit_type: '',
                watch_level: '',
                contact_name: '',
                phone: '',
                region_id: '',
                wb_unit_id: '',
                have_install: ''
            },
            taskId: 0,
            search1: {},
            search: {},
            tableData: [],
            earlyWarningData: [],
            loading: false,
            tableDataInfo: '',
            unitTypeList: [],
            watchTypeList: [],
            regionList: [], //区域
            unitInfodialogVisible: false,
            unitEditId: '',
            pageCount: 1,
            isHaveDeviceOption: [
                { name: '已安装', value: 1 },
                { name: '未安装', value: 2 }
            ]
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.data == 10) {
                this.getearlyWarningData()
            } else {
                this.getDataList()
            }
        })
    },
    created() {
        this.getType()
        // this.getRegionList();
        this.getWbUnitList()
    },
    methods: {
        onDownExcel() {
            this.$apis.post('/unit/PatrolTask/listsExel', {}, { responseType: 'blob' }).then((res) => {
                const blob = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                })
                if (window.navigator.msSaveOrOpenBlob) {
                    //兼容IE10
                    navigator.msSaveBlob(blob, '导出文件.xlsx')
                } else {
                    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                    const a = document.createElement('a') //创建a标签
                    a.style.display = 'none'
                    a.href = href // 指定下载链接
                    a.download = '导出文件.xlsx' //指定下载文件名
                    a.click() //触发下载
                    URL.revokeObjectURL(a.href) //释放URL对象
                }
            })
        },
        showTaskDetail(row) {
            //查看详细
            this.taskDetailVisible = true
            this.taskId = row.id
        },
        patrolResult(patrol_result) {
            let temp = ['', 'overdue-num', 'unqualified-num']
            return temp[patrol_result]
        },
        formatterTime(row, column, cellValue, index) {
            return this.$getDateTime(cellValue)
        },
        getearlyWarningData() {
            var timestamp = new Date().getTime()
            let params = {
                page: this.pageCount,
                rows: 10,
                patrol_status: 3,
                ...this.search1,
                start_time: [timestamp - 31104000000, timestamp]
            }

            this.$apis
                .post('/unit/PatrolTask/lists', params)
                .then((res) => {
                    this.earlyWarningData = res.data.lists
                    this.pagination = res.data
                    this.tableDataInfo = {
                        totalCount: res.data.total,
                        totalPage: res.data.total_page,
                        currPage: res.data.page
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },

        getWbUnitList() {
            this.$api.post('/unit/WbUnit/Lists', { rows: 9999 }).then((res) => {
                this.wbUnitTypeList = res.data.list
            })
        },
        formatDate(row, column, time, index) {
            return this.$getDateTime(time)
        },
        // jumpEvent(name, row) {
        //   console.log(row.unitCode);
        //   this.$router.push({
        //     name: name,
        //     query: {
        //       unitCode: row.unitCode,
        //     },
        //   });
        // },
        refreshList(cancel) {
            this.unitInfodialogVisible = false
            if (!cancel) {
                this.getDataList()
            }
        },
        userMange(index, row) {
            this.$router.push({
                name: 'socialUnitUserMange',
                query: {
                    id: row.id //单位id
                }
            })
        },
        getDataList(page) {
            this.loading = true
            let data = this.searchForm
            if (this.setUnitWatchLevel) data.watch_level = this.setUnitWatchLevel

            if (this.all) {
                this.$api
                    .post('/xf/UnitInformation/lists', {
                        page: this.pageCount,
                        rows: 10,
                        is_networking: 1,
                        start_time: this.setUnitTime / 1000,
                        ...this.search1,
                        ...data
                    })
                    .then((res) => {
                        this.tableData = res.data.lists
                        this.tableDataInfo = res.data
                    })
                    .finally(() => {
                        this.loading = false
                    })
            } else {
                this.$api
                    .post('/unit/UnitInformation/NoNetworkedListsV2', {
                        page: this.pageCount,
                        rows: 10,
                        start_time: this.setUnitTime / 1000,
                        ...this.search1,
                        ...data
                    })
                    .then((res) => {
                        this.tableData = res.data.lists
                        this.tableDataInfo = res.data
                    })
                    .finally(() => {
                        this.loading = false
                    })
            }
        },
        reset() {
            this.search1 = {}
            this.getDataList(1)
        },
        // 搜索
        searchBtn() {
            this.getDataList()
        },
        // 重置
        refreshBtn() {
            for (let key in this.searchForm) {
                this.searchForm[key] = ''
            }
            this.getDataList()
        },
        // 获取类型
        getType() {
            this.$api.post('/unit/UnitInformation/Setting').then((res) => {
                this.unitTypeList = res.data.unit_type
                this.watchTypeList = res.data.watch_level
            })
        },
        getRegionList() {
            this.$api.post('/unit/Region/tree').then((res) => {
                this.regionList = res?.data.map((item) => {
                    return {
                        name: item.name,
                        value: item.id
                    }
                })
            })
        },
        handleEdit(index, row) {
            this.unitInfodialogVisible = true
            this.formDisabled = false
            this.unitEditId = row.id
            //   this.$router.push({
            //     name: "editSocialUnit",
            //     params: { id: row.id },
            //   });
        },
        showDetail(index, row) {
            this.unitInfodialogVisible = true
            this.formDisabled = true
            this.unitEditId = row.id
        },
        handleDelete(index, row) {
            this.$api.post('/xf/UnitInformation/delete', { id: row.id }).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
                let tableData = this.tableData
                tableData.splice(index, 1)
                this.getDataList()
            })
        },

        handleSizeChange(e) { },
        handleCurrentChange(e) {
            this.pageCount = e
            if (this.data == 10) {
                this.getearlyWarningData()
            } else {
                this.getDataList()
            }
        },
        closeDialog() {
            this.$refs.addForm.resetFields()
        },
        childMange(index, row) {
            this.$router.push({
                name: 'sociolUnitChildPage',
                query: { unit_id: row.id }
            })
        },
        patrol(index, row) {
            this.$router.push({
                name: 'patrolPoint',
                query: {
                    id: row.id
                }
            })
        },
        constructMange(index, row) {
            this.$router.push({
                name: 'constructionPage',
                query: {
                    id: row.id
                }
            })
        },
        qrcode(index, row) {
            this.$router.push({
                name: 'qrcode',
                query: {
                    id: row.id
                }
            })
        },
        toTaskList(index, row) {
            localStorage.removeItem('TASK_FROM')
            this.$router.push({
                name: 'sociolUnitTaskMange',
                query: {
                    unit_id: row.id
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
:v-deep(.el-tag) {
    width: 100px;
    height: auto;
    line-height: normal;
    white-space: normal;
}

.filter-label {
    width: 80px;
    text-align: right
}

.block {
    margin-top: 15px;
}

.searchBox {
    margin: 20px;
    display: flex;
    background-color: #fff;
    padding: 20px;

    .input {
        width: 12%;
        margin-right: 15px;
    }

    .hint {
        line-height: 40px;
        margin-right: 10px;
    }

    .searchBtn {
        background-color: #2d8cf0;
        color: #fff;
    }
}
</style>
